import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  ScrollView,
} from 'react-native';
import _ from 'lodash';
import PxToDp from '../../../utils/PxToDp';
import Base from '../../../utils/Base';

import CompareBar from './CompareBar';

const { window } = Base;
const { width } = window;

class DynamicProperty extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      title: '动力性',
    };
  }

  render() {
    const { screenProps } = this.props;

    const carIndex = _.findIndex(screenProps, o => o.title === this.state.title);

    const carDatas = carIndex === -1 ? {} : screenProps[carIndex];

    return (
      <View style={[styles.bgColor, styles.flex]}>
        <View style={[styles.row, styles.mark]}>
          <View style={[styles.icon, styles.center]}>
            <Text style={[styles.iconText]}>注</Text>
          </View>
          <View style={[styles.row, styles.item, { marginLeft: PxToDp(10), marginTop: PxToDp(2) }]}>
            <Image
              source={require('../../../img/home/oYes.png')}
              style={[styles.imgIcon]}
            />
            <Text style={[styles.text]}>有标配</Text>
          </View>
          <View style={[styles.row, styles.item, { marginLeft: PxToDp(22), marginTop: PxToDp(2) }]}>
            <Image
              source={require('../../../img/home/oNo.png')}
              style={[styles.imgIcon]}
            />
            <Text style={[styles.text]}>无标配</Text>
          </View>
        </View>
        <View style={[styles.showArea]}>
          <View style={[styles.titleWrapper]}>
            <Text style={[styles.title]}>{carDatas.title}</Text>
          </View>
          <ScrollView>
            <View style={[styles.showContent]}>
              {
                carDatas && carDatas.car1 && carDatas.car1.map((data, index) => (
                  <View
                    style={[styles.list]}
                    key={`${data.value}-${carDatas.title}-${Math.random(1000000)}`}
                  >
                    <View style={[styles.nameWrapper]}>
                      <Text style={[styles.name]}>{data.name}</Text>
                    </View>
                    {
                      data.image ?
                        <View style={[styles.barWrapper]}>
                          <Image
                            source={data.image}
                            style={[styles.carIcon]}
                          />
                          {
                          carDatas.cars > 1 ?
                            carDatas.car2[index].image ?
                              <Image
                                source={carDatas.car2[index].image}
                                style={[styles.carIcon]}
                              />
                            : (
                              typeof (carDatas.car2[index].value) === 'number'
                              ?
                                <View style={[styles.row, styles.barContainer]}>
                                  <CompareBar
                                    value={data.value}
                                    style={{ backgroundColor: '#c6ceda' }}
                                    base={5000}
                                  />
                                  <Text style={[styles.value]}>{carDatas.car2[index].value}</Text>
                                </View>
                              :
                                <Text style={{ color: '#666', fontSize: PxToDp(14) }}>{carDatas.car2[index].value}</Text>
                            )
                          :
                            null
                          }
                        </View>

                    : (
                    typeof (data.value) === 'number' ?
                      <View style={[styles.barWrapper]}>
                        <View style={[styles.row, styles.barContainer]}>
                          <CompareBar
                            value={data.value}
                            style={{ backgroundColor: '#f65252' }}
                            base={5000}
                          />
                          <Text style={[styles.value]}>{data.value}</Text>
                          {
                              carDatas.cars > 1 && data.value > carDatas.car2[index].value ?
                                <Image
                                  style={[styles.winIcon]}
                                  source={require('../../../img/home/oWinred.png')}
                                />
                              : null
                            }
                        </View>
                        {
                          carDatas.cars > 1
                          ?
                            <View style={[styles.row, styles.barContainer]}>
                              <CompareBar
                                value={data.value}
                                style={{ backgroundColor: '#c6ceda' }}
                                base={5000}
                              />
                              <Text style={[styles.value]}>{carDatas.car2[index].value}</Text>
                              {
                              data.value < carDatas.car2[index].value ?
                                <Image
                                  style={[styles.winIcon]}
                                  source={require('../../../img/home/oWingrey.png')}
                                />
                              : null
                            }
                            </View>
                          :
                          null
                        }
                      </View>
                    :
                      <View style={[styles.barWrapper]}>
                        <Text style={{ color: '#666', fontSize: PxToDp(14) }}>{data.value}</Text>
                        {
                        carDatas.cars > 1
                        ?
                          <Text style={{ color: '#666', fontSize: PxToDp(14) }}>{carDatas.car2[index].value}</Text>
                        :
                        null
                      }
                      </View>
                    )
                  }
                  </View>
                ))
              }
            </View>
          </ScrollView>
        </View>
      </View>
    );
  }
 }

const styles = StyleSheet.create({
  bgColor: {
    justifyContent: 'flex-start',
    alignItems: 'center',
    paddingTop: PxToDp(18),
    backgroundColor: 'transparent',
  },
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  center: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  mark: {
    justifyContent: 'flex-start',
    width: PxToDp(width),
    paddingLeft: PxToDp(16),
    paddingRight: PxToDp(16),
  },
  icon: {
    width: PxToDp(16),
    height: PxToDp(16),
    borderRadius: PxToDp(8),
    backgroundColor: '#f59b9a',
  },
  iconText: {
    color: '#fff',
    fontSize: PxToDp(11),
  },
  item: {
    alignItems: 'center',
    height: PxToDp(13),
  },
  imgIcon: {
    width: PxToDp(13),
    height: PxToDp(13),
  },
  text: {
    marginLeft: PxToDp(6),
    color: '#999',
    fontSize: PxToDp(11),
  },
  showArea: {
    marginTop: PxToDp(10),
    width: PxToDp(width - 20),
    paddingBottom: PxToDp(24),
    backgroundColor: '#fff',
    borderWidth: PxToDp(1),
    borderColor: '#ddd',
  },
  titleWrapper: {
    justifyContent: 'center',
    alignItems: 'flex-start',
    width: '100%',
    height: PxToDp(45),
    paddingLeft: PxToDp(14),
    borderBottomWidth: 1,
    borderColor: '#ececec',
  },
  title: {
    color: '#2d2e30',
    fontSize: PxToDp(14),
  },
  nameWrapper: {
    justifyContent: 'center',
    height: '100%',
    width: PxToDp(74),
  },
  name: {
    flexWrap: 'wrap',
    color: '#333',
    fontSize: PxToDp(12),
  },
  showContent: {
    paddingLeft: PxToDp(14),
    paddingRight: PxToDp(8),
  },
  list: {
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    width: '100%',
    height: PxToDp(70),
  },
  barWrapper: {
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    width: PxToDp(237),
    height: PxToDp(70),
    paddingTop: PxToDp(15),
    paddingBottom: PxToDp(5),
    borderColor: '#ececec',
    borderBottomWidth: 1,
  },
  value: {
    marginLeft: PxToDp(22),
    color: '#666',
    fontSize: PxToDp(12),
  },
  carIcon: {
    width: PxToDp(23),
    height: PxToDp(18),
  },
  barContainer: {
    justifyContent: 'flex-start',
    width: '100%',
  },
  winIcon: {
    marginTop: PxToDp(3),
    marginLeft: PxToDp(5),
  },
});

export default DynamicProperty;
